export default {
  name: 'MyInput',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  created () {
    this.myVal = this.value
  },
  data() {
    return {
      myVal: ''
    }
  },
  methods: {
    onInput(event) {
      // not update v-model when composing
      if (event.target.composing) {
        return;
      }

      this.$emit('input', this.format(event.target));
    },
    format(target = this.$refs.input) {
      if (!target) {
        return;
      }

      let { value } = target;

      return value;
    }
  },
  computed: {
    listeners() {
      const listeners = {
        input: this.onInput
      };

      delete listeners.click;

      return listeners;
    },
  },
  render () {
    const inputProps = {
      ref: 'input',
      domProps: {
        value: this.value
      },
      on: this.listeners,
      // add model directive to skip IME composition
      directives: [
        {
          name: 'model',
          value: this.value
        }
      ]
    };

    return <input {...inputProps} />;
  },
  watch: {
    value (val) {
      this.$emit('value', val)
    }
  },
}
